<template>
  <div class="user-list">
    <h2>用户管理</h2>
    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th><th>用户名</th><th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in pagedUsers" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
    <div style="margin-top:16px;">
      <button :disabled="page===1" @click="page--">上一页</button>
      <span>第 {{page}} 页 / 共 {{totalPages}} 页</span>
      <button :disabled="page===totalPages" @click="page++">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
// 假数据用户列表
const users = ref([
  { id: 1, username: 'user1', email: 'user1@example.com' },
  { id: 2, username: 'user2', email: 'user2@example.com' },
  { id: 3, username: 'user3', email: 'user3@example.com' },
  { id: 4, username: 'user4', email: 'user4@example.com' },
  { id: 5, username: 'user5', email: 'user5@example.com' },
  { id: 6, username: 'user6', email: 'user6@example.com' },
  { id: 7, username: 'user7', email: 'user7@example.com' },
  { id: 8, username: 'user8', email: 'user8@example.com' },
  { id: 9, username: 'user9', email: 'user9@example.com' },
  { id: 10, username: 'user10', email: 'user10@example.com' },
])
const page = ref(1)
const pageSize = 5
// 计算总页数
const totalPages = computed(() => Math.ceil(users.value.length / pageSize))
// 当前页显示的用户
const pagedUsers = computed(() => users.value.slice((page.value-1)*pageSize, page.value*pageSize))
</script> 
<style scoped>
.user-list { color:#333; }
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.04);
}
th, td {
  padding: 12px 16px;
  text-align: left;
}
th {
  background: #f5f7fa;
  color: #409eff;
  font-weight: 600;
}
tr:nth-child(even) {
  background: #f9f9f9;
}
</style> 